<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HXNT IP网络质量及应用监测系统</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/myself/easyui.css"/>  
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/icon.css"/>
<%@ include file="./common/taglibs.jsp"%>
<%@ include file="./common/meta.jsp"%>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<style type="text/css">
body,html,#allmap,.wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
}

#l-map {
	height: 100%;
	width: 100%;
	float: left;
	border-right: 1px solid #bcbcbc;
}

#fpanel div {
	padding: 3px;
}
</style>
</head>
<body>
	<div id="content" class="easyui-panel"
		data-options="fit:true,border:false"
		style="overflow: hidden; margin: 0;">
		<div id="l-map" class="easyui-panel"
			data-options="fit:true,border:false"></div>
		<div id="fpanel" class="easyui-window" title="参数配置"
			data-options="minimizable:false,maximizable:false,closable:false,resizable:false"
			style="width: 200px;">
			<div>
				功能测试1:<input type="text" id="aa" value="test" size="14"
					class="easyui-validatebox/" />
			</div>
			<div>
				功能测试2:<input type="text" id="bb" value="test" size="14"
					class="easyui-validatebox/" />
			</div>
			<div>
				功能测试1:<input type="text" id="aa" value="test" size="14"
					class="easyui-validatebox/" />
			</div>
			<div>
				功能测试2:<input type="text" id="bb" value="test" size="14"
					class="easyui-validatebox/" />
			</div>
		</div>
		<div id="topo_mm" class="easyui-menu" style="width: 120px;">
			<div onclick="javascript:bdGEO();">Mark</div>
			<div onclick="javascript:drawLine();">Draw Line</div>
			<div onclick="javascript:clearAll();">Clear</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			$("#l-map").bind('contextmenu', function(e) {
				e.preventDefault();
				$('#topo_mm').menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			});

			$("#fpanel").window({
				onOpen : function() {
					var x = $(window).width() - $(this).width() - 200;
					var y = 40;//$(window).height() - $(this).height() - 70;
					$(this).window('move', {
						left : x,
						top : y
					});
				},
				inline : true
			}).window("open");

		});
	</script>
	<script>
		var map = new BMap.Map("l-map");
		map.centerAndZoom("广东", 8);
		map.enableScrollWheelZoom();
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.ScaleControl());
		map.addControl(new BMap.OverviewMapControl());

		var index = 0;
		var myGeo = new BMap.Geocoder();
		var adds = [ {
			name : "韶关",
			id : 1
		}, {
			name : "清远",
			id : 2
		}, {
			name : "广州",
			id : 3
		}, {
			name : "深圳",
			id : 4
		}, {
			name : "惠州",
			id : 5
		}, {
			name : "汕头",
			id : 6
		} ];
		var points = [];
		var lines = [ {
			start : "韶关",
			end : "深圳"
		}, {
			start : "广州",
			end : "惠州"
		}, {
			start : "清远",
			end : "汕头"
		} ];
		function bdGEO() {
			var add = adds[index];
			geocodeSearch(add.name);
			index++;
		}

		function drawLine() {
			for ( var i = 0; i < lines.length; i++) {
				var startPoint;
				var endPoint;
				for ( var j = 0; j < points.length; j++) {
					if (lines[i].start == points[j].name) {
						startPoint = points[j].point;
						break;
					}
				}
				for ( var j = 0; j < points.length; j++) {
					if (lines[i].end == points[j].name) {
						endPoint = points[j].point;
						break;
					}
				}

				var ps = [];
				ps.push(startPoint);
				ps.push(endPoint);
				var polyline = new BMap.Polyline(ps, {
					strokeColor : "red",
					strokeWeight : 2,
					strokeOpacity : 1
				});
				polyline.addEventListener("click", function(e) {
					this.enableEditing();
				});
				addArrow(polyline, 10, Math.PI / 7);
				map.addOverlay(polyline);
			}
		}
		function geocodeSearch(add) {
			if (index < adds.length) {
				setTimeout(window.bdGEO, 300);
			}
			myGeo.getPoint(add, function(point) {
				if (point) {
					points.push({
						name : add,
						point : point
					});
					var marker = new BMap.Marker(new BMap.Point(point.lng,
							point.lat));
					marker.addEventListener("onclick", function(e2) {
						var infoWindowOpts = {
							width : 100,
							height : 100,
							title : "Hello"
						};
						var infoWindow = new BMap.InfoWindow(add,
								infoWindowOpts);
						marker.openInfoWindow(infoWindow);
					});
					map.addOverlay(marker);
				}
			}, "广东省");
		}
		function addArrow(polyline, length, angleValue) { //绘制箭头的函数
			var linePoint = polyline.getPath();//线的坐标串
			var arrowCount = linePoint.length;
			for ( var i = 1; i < arrowCount; i++) { //在拐点处绘制箭头
				var pixelStart = map.pointToPixel(linePoint[i - 1]);
				var pixelEnd = map.pointToPixel(linePoint[i]);
				var angle = angleValue;//箭头和主线的夹角
				var r = length; // r/Math.sin(angle)代表箭头长度
				var delta = 0; //主线斜率，垂直时无斜率
				var param = 0; //代码简洁考虑
				var pixelTemX, pixelTemY;//临时点坐标
				var pixelX, pixelY, pixelX1, pixelY1;//箭头两个点
				if (pixelEnd.x - pixelStart.x == 0) { //斜率不存在是时
					pixelTemX = pixelEnd.x;
					if (pixelEnd.y > pixelStart.y) {
						pixelTemY = pixelEnd.y - r;
					} else {
						pixelTemY = pixelEnd.y + r;
					}
					//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
					pixelX = pixelTemX - r * Math.tan(angle);
					pixelX1 = pixelTemX + r * Math.tan(angle);
					pixelY = pixelY1 = pixelTemY;
				} else //斜率存在时
				{
					delta = (pixelEnd.y - pixelStart.y)
							/ (pixelEnd.x - pixelStart.x);
					param = Math.sqrt(delta * delta + 1);

					if ((pixelEnd.x - pixelStart.x) < 0) //第二、三象限
					{
						pixelTemX = pixelEnd.x + r / param;
						pixelTemY = pixelEnd.y + delta * r / param;
					} else//第一、四象限
					{
						pixelTemX = pixelEnd.x - r / param;
						pixelTemY = pixelEnd.y - delta * r / param;
					}
					//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
					pixelX = pixelTemX + Math.tan(angle) * r * delta / param;
					pixelY = pixelTemY - Math.tan(angle) * r / param;

					pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param;
					pixelY1 = pixelTemY + Math.tan(angle) * r / param;
				}

				var pointArrow = map
						.pixelToPoint(new BMap.Pixel(pixelX, pixelY));
				var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1,
						pixelY1));
				var Arrow = new BMap.Polyline([ pointArrow, linePoint[i],
						pointArrow1 ], {
					strokeColor : "red",
					strokeWeight : 3,
					strokeOpacity : 0.5
				});
				map.addOverlay(Arrow);
			}
		}
		function clearAll() {
			map.clearOverlays();
		}
	</script>
</body>
</html>